import {Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import * as todoActions from '../store/actions/todo.actions'

class Header extends Component{
  addTodo (ev){
    if(ev.keyCode === 13){
      const value = ev.target.value.trim()
      if (value.length > 0){
        this.props.add_todo(value)
      }
      ev.target.value = ''
    }
  }
  render() {
    return (
			<header className="header">
				<h1>todos</h1>
				<input className="new-todo" placeholder="还有什么任务没有完成?" autoFocus onKeyUp={(ev) => this.addTodo(ev)}/> 
			</header>
    )
  }
}


const mapStateToProps = (state) => ({
  todos: state.todoReducer.todos
})

const mapDispatchToProps = (dispatch) => ({
  ...bindActionCreators(todoActions, dispatch)
})

export default connect(mapStateToProps,mapDispatchToProps)(Header)